<template>
  <view class="integral">
    <view class="fixedManual" v-if="stickyAct">
      <view
        v-for="(tab, index) in items"
        :key="tab.id"
        class="uni-tab-item"
        :id="'scroll_' + tab.id"
        :data-current="index"
        @click="onClickItem(tab.id)"
      >
        <text
          class="uni-tab-item-title"
          :class="current == tab.id ? 'uni-tab-item-title-active' : ''"
          >{{ tab.name }}</text
        >
      </view>
    </view>
    <view class="integral-wrapper">
      <view class="integral-bg">
        <!-- #ifndef MP-WEIXIN -->
        <text class="integral-title">我的权益分</text>
        <!-- #endif -->
      </view>
      <view class="integral-space"></view>
      <view class="integral-box">
        <text class="integral-box-head">可用权益分</text>
        <view class="integral-box-content">
          <text class="integral-total">{{ totalIntegralState.totalIntegral }}</text>
          本月已获取
          <text class="tip">{{ totalIntegralState.integral }}</text>
          个权益分
        </view>
        <view class="integral-box-footer">
          <button plain="true"
                  style="border: 1rpx solid #00b588; color: #00b588; padding-left: 10rpx; padding-right: 10rpx"
                  class="mini-btn" type="default" size="mini" @click="onObtain">
            获取权益分
          </button>
          <button
              style="border: 0; color: #ffffff; padding-left: 11rpx; padding-right: 11rpx; background-color: #00b588"
              class="mini-btn"
              type="default"
              size="mini"
              @click="$refs.popup.open('bottom')"
          >
            权益分规则
          </button>
        </view>
      </view>
    </view>
    <!-- 权益分规则 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        <view class="integralRule">
          <view class="title">荣耀殿堂权益分规则</view>
          <view class="content">
            <scroll-view scroll-y="true" class="scrollView">
              <text>一、荣耀殿堂权益分</text>
              <view class="p"
              >
                荣耀殿堂权益分(一下简称“权益分”)荣耀殿堂回馈用户的权益奖励，权益分不具有货币或现金价值，不可兑现，不可转让。用户可以通过支付、账户服务、金融理财和权益分奖励活动等方式来获取权益分，权益分可以在荣耀殿堂服务及指定合作伙伴处兑换各类权益、参与各种权益分活动等，具体以权益兑换及活动页面展示为准。
              </view
              >
              <text>二、权益分获取</text>
              <view class="p"
              >荣耀殿堂用户可以通过在平台完成对应得任务获取权益分。权益分发放后，用户可前往“我的”-“我的消息”里面点击领取，权益分方可到账。权益分自产生之时起，领取有效期7天(168小时)，逾期不领则作废，不予不发。
              </view
              >
              <text>三、权益分消耗</text>
              <view class="p">
                荣耀殿堂用户可以通过在平台权益分商城和实物商城中使用权益分；其中权益分商城为平台虚拟物品的消耗，包括服饰、种子、工具、称号、宠物等等
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </uni-popup>
    <scroll-view
      class="scroll-h"
      :scroll-x="true"
    >
      <view
        v-for="(tab, index) in items"
        :key="tab.id"
        class="uni-tab-item"
        :id="'scroll_' + tab.id"
        :data-current="index"
        @click="onClickItem(tab.id)"
      >
        <text
          class="uni-tab-item-title"
          :class="current == tab.id ? 'uni-tab-item-title-active' : ''"
          >{{ tab.name }}</text
        >
      </view>
    </scroll-view>
    <view class="integral-group" v-if="current === 0">
      <view class="date-filter">
      <text class="date-box">
        <uni-datetime-picker type="datetime range" @change="confirm"> <text
            class="iconfont icon-calendar"></text>{{ date }} </uni-datetime-picker>
      </text>
        <text class="money-total">
        累计：
        <text class="count" v-if="incomeState.length">+{{ useAddCommas(incomeState[0].totalConsume) }}</text>
        <text class="count" v-else>0</text>
      </text>
      </view>
      <view class="integral-box" v-for="item in incomeState" :key="item.id">
        <view class="i-b-left">
          <text class="i-b-title">{{ item.changeType }}</text>
          <text class="i-b-text">{{ item.createTime }}</text>
          <text class="i-b-text">{{ item.integralBigClassName }}<text class="money"></text></text>
        </view>
        <view class="i-b-count"> +{{ item.changeValue }} <text class="i-b-tip">权益分</text></view>
      </view>
      <none-data v-if="incomeState.length===0 && isLoading"/>
    </view>
    <view class="integral-group" v-if="current === 1">
      <view class="date-filter">
      <text class="date-box">
        <uni-datetime-picker type="datetimerange" @change="confirm"> <text
            class="iconfont icon-calendar"></text> {{ date }} </uni-datetime-picker>
      </text>
        <text class="money-total"
        >累计：
        <text class="count expenses-total"
              v-if="expenditureState.length">{{ useAddCommas(expenditureState[0].totalConsume) }}</text>
                    <text class="count" v-else>0</text>
      </text>
      </view>
      <view class="integral-box expenses" v-for="item in expenditureState" :key="item.id">
        <view class="i-b-left">
          <text class="i-b-title">{{ item.changeType }}</text>
          <text class="i-b-text">{{ item.createTime }}</text>
          <text class="i-b-text">{{ item.integralBigClassName }}</text>
        </view>
        <view class="i-b-count"> {{ item.changeValue }} <text class="i-b-tip">权益分</text></view>
      </view>
      <none-data v-if="expenditureState.length===0 && isLoading"/>
    </view>
  </view>
</template>

<script setup>
import MyTab from "@/components/tabs/index.vue";
import XBox from "@/components/box/index.vue";
import {onMounted, ref, getCurrentInstance, reactive, watch} from "vue";

const {proxy} = getCurrentInstance();
import {getUserUsableIntegral, userGetIntegral} from "@/api/user";
import {useAddCommas} from "@/utils/formatHooks";
import UniDatetimePicker
  from "@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import UniDataChecklist from "@/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue";
import { onReachBottom,onReady,onPageScroll} from "@dcloudio/uni-app";
import { getTabsTop } from '@/utils/formatHooks.js';

const items = ref([
  {
    id: 0,
    name: "权益分收入",
  },
  {
    id: 1,
    name: "权益分支出",
  },
]);
const totalIntegralState = reactive({
  totalIntegral: 0,
  integral: 0,
});
const current = ref(0);
const date = ref("");
const formatDate = (date) => `${date.getMonth() + 1}月${date.getDate()}日`;
const datetimerangeState = reactive({
  startTime: "",
  endTime: "",
  size: 10,
  page: 1,
  type: 0,
});
const total = ref(0);
const incomeState = ref([]); // 收入权益分
const expenditureState = ref([]); // 支出权益分
const isLoading = ref(false)
const stickyAct = ref(false)
const scrolltime = ref(0)

function onClickItem(e) {
  current.value = e;
  incomeState.value = [];
  expenditureState.value = [];
  total.value = 0;
  datetimerangeState.type = e;
  datetimerangeState.page = 1;
  isLoading.value = false
  userGetIntegralFn();
}

// 上拉加载更多
function onLoadmoreTab() {
  if (current.value === 0) {
    if (incomeState.value.length === total.value) {
      uni.showToast({
        title: "已经到底了！",
        icon: 'none'
      });
    } else {
      datetimerangeState.page += 1;
      userGetIntegralFn();
    }
  } else if (current.value === 1) {
    if (expenditureState.value.length === total.value) {
      return uni.showToast({
        title: "已经到底了！",
        icon: 'none'
      });
    } else {
      datetimerangeState.page += 1;
      userGetIntegralFn();
    }
  }
}

// 查询收入/支出权益分
const userGetIntegralFn = () => {
  userGetIntegral(datetimerangeState).then((res) => {
    isLoading.value = true
    if (res.code === 200) {
      total.value = res.data.total;
      current.value ? expenditureState.value.push(...res.data.records) : incomeState.value.push(...res.data.records);
    }
  });
};

// 返回选中日期
function confirm(e) {
  incomeState.value = [];
  expenditureState.value = [];
  isLoading.value = false
  const [before, after] = e;
  date.value = `${formatDate(new Date(before))} 至 ${formatDate(new Date(after))}`;
  datetimerangeState.startTime = before;
  datetimerangeState.endDTime = after;
  userGetIntegralFn();
}

const getUserUsableIntegralFn = () => {
  getUserUsableIntegral().then((res) => {
    if (res.code === 200) {
      const {integral, totalIntegral} = res.data;
      totalIntegralState.integral = integral ? integral : 0;
      totalIntegralState.totalIntegral = totalIntegral ? totalIntegral : 0;
    }
  });
};

const  getScrollHeight = () => {
  return `100vh - 585rpx`
}

function onObtain(){
  proxy.modal.msg("开发中~")
}

onReachBottom(()=>{
  onLoadmoreTab()
})
onPageScroll(()=>{
  getTabsTop('.scroll-h').then(res => {
    const time = Date.now()
    if (time - scrolltime.value > 100) {
      scrolltime.value = time

      if(res<=0){
        stickyAct.value = true

      }else{
        stickyAct.value = false
      }
    }
	})
})
onReady(()=>{
  uni.getSystemInfo({
    success: (e) => {
      let tops = e
      console.log(tops)
    }
  })
})
onMounted(() => {
  date.value = `全部`;
  userGetIntegralFn();
  getUserUsableIntegralFn();
});
</script>

<style lang="less" scoped>
@import url(./less/integral.less);
</style>
